<template>
  <div class="content">
    <div class="page-header">
      <div class="title">高级查询</div>
      <div class="search-condition">
        <div class="conditon">
          <span class="choice">已选条件:</span>
          <el-tag
            v-for="tag in tags"
            :key="tag"
            effect="plain"
            @close="handleClose(tag)"
            closable
            style="margin-bottom: 10px"
          >
            {{ tag }}
          </el-tag>
        </div>
        <div class="remove" @click="remove">重置条件</div>
      </div>
    </div>
    <div class="main">
      <div class="used">
        <div class="used-title">常用筛选</div>
        <el-form
          ref="form"
          :model="data.form"
          label-width="120px"
          label-position="left"
        >
          <el-form-item label="公司名称关键字">
            <el-col :span="8"
              ><el-input v-model="data.form.keyword" @input="getTag"></el-input
            ></el-col>
          </el-form-item>
          <el-row>
            <el-col :span="10" class="left-col">
              <el-form-item label="所属分公司">
                <el-select
                  v-model="data.form.citycodes"
                  placeholder="请选择所属分公司"
                >
                  <el-option
                    v-for="(item, index) in cityList"
                    :key="index"
                    :label="item.codename"
                    :value="item.codevalue"
                  ></el-option>
                  <!-- <el-option label="区域二" value="beijing"></el-option> -->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="所属片区">
                <el-select
                  v-model="data.form.region"
                  placeholder="请选择所属片区"
                >
                  <el-option
                    v-for="(item, index) in regionList"
                    :key="index"
                    :label="item.wdname"
                    :value="item.orgid"
                  ></el-option>
                  <!-- <el-option label="区域二" value="beijing"></el-option> -->
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" class="left-col">
              <el-form-item label="客户类别">
                <el-select
                  v-model="data.form.custype"
                  placeholder="请选择客户类别"
                >
                  <el-option
                    v-for="(item, index) in cusType"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="企业添加时间">
                <el-date-picker
                  v-model="addTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" class="left-col">
              <el-form-item label="企业性质">
                <el-select
                  v-model="data.form.cusScaleId"
                  placeholder="请选择企业性质"
                >
                  <el-option
                    v-for="(item, index) in cusScale"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="所属税务机关">
                <el-select
                  v-model="data.form.ceTaxbureaid"
                  placeholder="请选择所属税务机关"
                >
                  <el-option
                    v-for="(item, index) in taxList"
                    :key="index"
                    :label="item.taxBureaName"
                    :value="item.taxBureaId"
                  ></el-option>
                  <!-- <el-option label="区域二" value="beijing"></el-option> -->
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="注册资本">
            <el-radio-group v-model="capital">
              <el-radio
                v-for="(item, index) in price"
                :key="index"
                :label="item"
                >{{ item }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="used">
        <div class="used-title">业务筛选</div>
        <el-form
          ref="form2"
          :model="form"
          label-width="120px"
          label-position="left"
        >
          <el-row>
            <el-col :span="10" class="left-col">
              <el-form-item label="客户经理">
                <el-input v-model="data.form.khjlid" @input="getCus"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="合同是否上传">
                <el-select
                  v-model="data.form.htstatus"
                  placeholder="请选择合同是否上传"
                >
                  <el-option
                    v-for="(item, index) in htstatus"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" class="left-col">
              <el-form-item label="购买物品">
                <el-input
                  v-model="data.form.matCode"
                  @input="getThing"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="服务到期时间">
                <el-date-picker
                  v-model="serverTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="page-footer">
      <el-button class="search" type="primary" @click="search()"
        >查一下</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { getCustomer } from '@/api/customer/customer'
import {
  fetchRegionList,
  fetchCityList,
  fetchCustomerTaxBureauList
} from '@/api/order/order'
import { reactive, watch, getCurrentInstance, toRefs } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const route = useRouter()
const data = reactive({
  tags: [],
  capital: '',
  category: '',
  addTime: '',
  serverTime: '',
  price: [
    '100万以内',
    '100万-200万',
    '200万-500万',
    '500万-1000万',
    '1000万-2000万',
    '2000万-5000万',
    '5000以上'
  ],
  cityList: [],
  regionList: [],
  taxList: [],
  cusType: [
    { label: '一般产品客户', value: '0' },
    { label: '代账公司', value: '1' },
    { label: '重点客户', value: '2' }
  ],
  cusScale: [
    { label: '一般纳税人', value: '0' },
    { label: '小规模纳税人', value: '1' },
    { label: '点下户', value: '2' },
    { label: '非纳税人', value: '3' }
  ],
  htstatus: [
    { label: '未上传', value: '0' },
    { label: '已上传', value: '1' }
  ],
  form: {
    region: '',
    ceTaxbureaid: '',
    citycodes: '',
    createEndDate: '',
    createStartDate: '',
    cusScaleId: '',
    custype: '',
    htstatus: '',
    keyword: '',
    khjlid: '',
    matCode: '',
    serviceEndDate: '',
    serviceStartDate: '',
    areaCode: '',
    maxRegmoney: undefined,
    minRegmoney: undefined
    // pageNum: "1",
    // pageSize: "10",
  }
})

let {
  tags,
  capital,
  category,
  addTime,
  serverTime,
  price,
  cityList,
  regionList,
  taxList,
  cusType,
  cusScale,
  htstatus
  // form
} = toRefs(data)

// const form = reactive()
watch(
  data.form,
  (newVal, oldVal) => {
    // let data = data
    // console.log(newVal.citycodes)
    // if (newVal.keyword != "") {
    //   if (tags.indexOf("关键词") == -1) {
    //     tags.push("关键词");
    //   }
    // } else {
    //   let num = tags.indexOf("关键词");
    //   tags.splice(num, 1);
    // }
    let name = ''
    /** 分公司 */
    if (newVal.citycodes) {
      cityList.value.forEach(item => {
        if (item.codevalue == newVal.citycodes) {
          name = '分公司:' + item.codename
        }
      })
      console.log(name)
      let str = /分公司/i
      let num = -1
      tags.value.forEach((item, index) => {
        if (str.test(item)) {
          num = index
        }
      })
      console.log(num)
      num > -1 ? (tags[num] = name) : tags.value.push(name)
      // if(num != null){
      //   tags[num] = name
      // }else{
      //   tags.push(name);
      // }
    }
    /** 片区 */
    if (newVal.region) {
      regionList.value.forEach(item => {
        if (item.orgid == newVal.region) {
          name = '片区:' + item.wdname
        }
      })
      let str = /片区/i
      let num = -1
      tags.value.forEach((item, index) => {
        if (str.test(item)) {
          num = index
        }
      })
      num > -1 ? (tags[num] = name) : tags.value.push(name)
    }
    /** 客户类别 */
    if (newVal.custype) {
      cusType.value.forEach(item => {
        if (item.value == newVal.custype) {
          name = '客户类型:' + item.label
        }
      })
      let str = /客户类型/i
      let num = -1
      tags.value.forEach((item, index) => {
        if (str.test(item)) {
          num = index
        }
      })
      num > -1 ? (tags[num] = name) : tags.value.push(name)
    }
    /** 企业性质 */
    if (newVal.cusScaleId) {
      cusScale.value.forEach(item => {
        if (item.value == newVal.cusScaleId) {
          name = '企业性质:' + item.label
        }
      })
      let str = /企业性质/i
      let num = -1
      tags.value.forEach((item, index) => {
        if (str.test(item)) {
          num = index
        }
      })
      num > -1 ? (tags[num] = name) : tags.value.push(name)
    }
    /** 税务机关 */
    if (newVal.ceTaxbureaid) {
      taxList.value.forEach(item => {
        if (item.taxBureaId == newVal.ceTaxbureaid) {
          name = '税务机关:' + item.taxBureaName
        }
      })
      let str = /税务机关/i
      let num = -1
      tags.value.forEach((item, index) => {
        if (str.test(item)) {
          num = index
        }
      })
      num > -1 ? (tags[num] = name) : tags.value.push(name)
    }
    /** 合同是否上传 */
    if (newVal.htstatus) {
      htstatus.value.forEach(item => {
        if (item.value == newVal.htstatus) {
          name = '合同是否上传:' + item.label
        }
      })
      let str = /合同是否上传/i
      let num = -1
      tags.value.forEach((item, index) => {
        if (str.test(item)) {
          num = index
        }
      })
      num > -1 ? (tags[num] = name) : tags.value.push(name)
    }
  },
  { deep: true }
)

init()
async function init() {
  await fetchCity()
  await fetchRegion()
  await fetchTaxBureau()
}
/** 关闭tag */
function handleClose(tag) {
  tags.value.splice(tags.value.indexOf(tag), 1)
  console.log(tag)
  let str = /分公司/i
  let reg = /片区/i
  let keys = /关键字/i
  let custype = /客户类型/i
  let scale = /企业性质/i
  let tax = /税务机关/i
  let status = /合同是否上传/i
  let cus = /客户经理/i
  let thing = /购买物品/i
  if (str.test(tag)) {
    data.form.citycodes = ''
  } else if (reg.test(tag)) {
    data.form.region = ''
  } else if (keys.test(tag)) {
    data.form.keyword = ''
  } else if (custype.test(tag)) {
    data.form.custype = ''
  } else if (scale.test(tag)) {
    data.form.cusScaleId = ''
  } else if (tax.test(tag)) {
    data.form.ceTaxbureaid = ''
  } else if (status.test(tag)) {
    data.form.htstatus = ''
  } else if (cus.test(tag)) {
    data.form.khjlid = ''
  } else if (thing.test(tag)) {
    data.form.matCode = ''
  }
}

/** 监听关键字 */
function getTag() {
  let name = '关键字:' + data.form.keyword
  let str = /关键字/i
  let num = -1
  tags.value.forEach((item, index) => {
    if (str.test(item)) {
      num = index
    }
  })
  num > -1 ? (tags[num] = name) : tags.value.push(name)
}
/** 客户经理 */
function getCus() {
  let name = '客户经理:' + data.form.khjlid
  let str = /客户经理/i
  let num = -1
  tags.value.forEach((item, index) => {
    if (str.test(item)) {
      num = index
    }
  })
  num > -1 ? (tags[num] = name) : tags.value.push(name)
}
/** 购买物品 */
function getThing() {
  let name = '购买物品:' + data.form.matCode
  let str = /购买物品/i
  let num = -1
  tags.value.forEach((item, index) => {
    if (str.test(item)) {
      num = index
    }
  })
  num > -1 ? (tags[num] = name) : tags.value.push(name)
}
/** 重置 */
function remove() {
  tags.value = []
  Object.assign(data.form, proxy.$options.data().form)
}
/** 获取区域列表 */
async function fetchRegion() {
  const res = await fetchRegionList()
  if (res.code === 200) {
    regionList.value = res.data
  } else {
    proxy.$modal.msgError('获取区域列表失败')
  }
}
/** 获取城市列表 */
async function fetchCity() {
  const res = await fetchCityList()
  if (res.code === 200) {
    cityList.value = res.data
  } else {
    proxy.$modal.msgError('获取城市列表失败')
  }
}
/** 获取税务机关 */
async function fetchTaxBureau() {
  const res = await fetchCustomerTaxBureauList()
  if (res.code === 200) {
    taxList.value = res.data
  } else {
    proxy.$modal.msgError('获取税局列表失败')
  }
}
function search() {
  data.form.createStartDate = addTime.value[0]
  data.form.createEndDate = addTime.value[1]
  data.form.serviceStartDate = serverTime.value[0]
  data.form.serviceEndDate = serverTime.value[1]
  switch (capital.value) {
    case '100万以内':
      data.form.minRegmoney = undefined
      data.form.maxRegmoney = 100
      break
    case '100万-200万':
      data.form.minRegmoney = 100
      data.form.maxRegmoney = 200
      break
    case '200万-500万':
      data.form.minRegmoney = 200
      data.form.maxRegmoney = 500
      break
    case '500万-1000万':
      data.form.minRegmoney = 500
      data.form.maxRegmoney = 1000
      break
    case '1000万-2000万':
      data.form.minRegmoney = 1000
      data.form.maxRegmoney = 2000
      break
    case '2000万-5000万':
      data.form.minRegmoney = 2000
      data.form.maxRegmoney = 5000
      break
    case '5000以上':
      data.form.minRegmoney = 5000
      data.form.maxRegmoney = undefined
      break
  }
  // console.log(form);
  // localStorage.setItem("searchList", JSON.stringify(form));
  // $router.push({ path: "/xs/khda", query: { flag: "search" } });
  getCustomer(data.form).then(res => {
    localStorage.setItem('searchList', JSON.stringify(res))
    route.push({ path: '/xs/khda', query: { flag: 'search' } })
  })
}
</script>
<style lang="scss" scoped>
.content {
  position: relative;
}
.page-header {
  padding: 20px 5px;
  box-sizing: border-box;
  border-bottom: 1px solid gray;
  .title {
    font-size: 20px;
    font-weight: bolder;
    padding-left: 50px;
    margin-bottom: 20px;
  }
  .search-condition {
    display: flex;
    align-items: center;
    padding-right: 50px;
    padding-left: 50px;
    justify-content: space-between;
    .choice {
      margin-right: 10px;
    }
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .remove {
      color: #1890ff;
      cursor: pointer;
      width: 15%;
      text-align: center;
    }
  }
}
.main {
  padding-bottom: 60px;
  .used {
    padding: 30px 60px;
    border-bottom: 1px solid gray;
    padding-bottom: 0;
    .used-title {
      margin-bottom: 30px;
      font-size: 20px;
    }
    .left-col {
      margin-right: 50px;
    }
  }
}
.page-footer {
  height: 60px;
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  align-items: center;
  justify-content: flex-end;
  left: 0;
  background: white;
  border: 1px solid gray;
  .search {
    margin-right: 30px;
  }
}
</style>
